<template>
  <div class="profile_wrapper">
    <router-link :to="userInfo && userInfo.user_id ? '/profile/info' : '/login'" class="profile_link">
      <div class="profile_header">
        <div class="photo">
          <img v-if="userInfo && userInfo.user_id" :src="imgBaseUrl + userInfo.avatar">
          <img v-else src="@/assets/images/face.png" />
        </div>
        <div class="info">
          <p class="account">{{userName}}</p>
          <p class="tel">
            <span class="iconfont">&#xe730;</span>
            <span>{{mobile}}</span>
          </p>
        </div>
        <span class="iconfont arrow">&#xe63c;</span>
      </div>
    </router-link>
    <div class="info_data">
      <ul>
        <router-link :to="userInfo && userInfo.user_id ? '/profile/balance' : '/login'" tag="li">
          <span class="num"><b>{{parseInt(balance).toFixed(2)}}</b>元</span>
          <span class="name">余额</span>
        </router-link>
        <router-link :to="userInfo && userInfo.user_id ? '/profile/benefit' : '/login'" tag="li">
          <span class="num"><b>{{couponCount}}</b>个</span>
          <span class="name">优惠</span>
        </router-link>
        <router-link :to="userInfo && userInfo.user_id ? '/profile/points' : '/login'" tag="li">
          <span class="num"><b>{{pointNumber}}</b>分</span>
          <span class="name">积分</span>
        </router-link>
      </ul>
    </div>
    <div class="profile_link_list">
      <!-- 我的地址 -->
      <router-link :to="userInfo && userInfo.user_id ? '/profile/address' : '/login'" class="link">
        <div class="icon">
          <span class="iconfont" style="color: #0af">&#xe601;</span>
        </div>
        <div class="rt">
          <span class="text">我的地址</span>
          <span class="iconfont arrow">&#xe63c;</span>
        </div>
      </router-link>
    </div>
    <div class="profile_link_list">
      <a href='https://home.m.duiba.com.cn/#/chome/index' class="link">
        <div class="icon">
          <span class="iconfont" style="color: #6ac20b; font-size: .4rem">&#xe680;</span>
        </div>
        <div class="rt">
          <span class="text">金币商城</span>
          <span class="iconfont arrow">&#xe63c;</span>
        </div>
      </a>
      <router-link to='/commend' class="link">
        <div class="icon">
          <span class="iconfont" style="color: #f60">&#xe645;</span>
        </div>
        <div class="rt">
          <span class="text">分享拿20元现金</span>
          <span class="iconfont arrow">&#xe63c;</span>
        </div>
      </router-link>
    </div>
    <div class="profile_link_list">
      <router-link to='/service' class="link">
        <div class="icon">
          <span class="iconfont" style="color: #0af">&#xe68b;</span>
        </div>
        <div class="rt">
          <span class="text">我的客服</span>
          <span class="iconfont arrow">&#xe63c;</span>
        </div>
      </router-link>
      <router-link to='/downApp' class="link">
        <div class="icon">
          <span class="iconfont" style="color: #0af; font-size: .35rem">&#xe606;</span>
        </div>
        <div class="rt">
          <span class="text">下载饿了么APP</span>
          <span class="iconfont arrow">&#xe63c;</span>
        </div>
      </router-link>
      <router-link to='' class="link">
        <div class="icon">
          <span class="iconfont" style="color: #0af; font-size: .4rem">&#xe61b;</span>
        </div>
        <div class="rt">
          <span class="text">规则中心</span>
          <span class="iconfont arrow">&#xe63c;</span>
        </div>
      </router-link>
    </div>
    <div class="policy"><a href="">隐私政策</a></div>
    <profile-footer></profile-footer>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import { getImgPath } from '@/assets/js/mixin'
import ProfileFooter from '@/components/footer/Footer'
export default {
  name: 'Profile',
  components: {
    ProfileFooter
  },
  data () {
    return {
      avatar: '', // 头像地址
      userName: '登录/注册', // 用户名
      mobile: '登录后享受更多特权', // 电话号码
      balance: 0, // 我的余额
      couponCount: 0, // 优惠券个数
      pointNumber: 0, // 积分数
      imgBaseUrl: 'https://elm.cangdu.org/img/'
    }
  },
  mounted () {
    // 获取用户信息
    this.getUserInfo()
    this.initData()
  },
  mixins: [getImgPath],
  computed: {
    ...mapState(['userInfo'])

    // 后台会返回两种头像地址格式，分别处理
    // avatarImgpath () {
    //   let path
    //   if (this.avatar.indexOf('/') !== -1) {
    //     path = imgBaseUrl + this.avatar
    //   } else {
    //     path = this.getImgPath(this.avatar)
    //   }
    //   this.SAVE_AVANDER(path)
    //   return path
    // }
  },
  methods: {
    ...mapActions(['getUserInfo']),
    ...mapMutations(['SAVE_AVANDER']),
    initData () {
      if (this.userInfo && this.userInfo.user_id) {
        this.avatar = this.userInfo.avatar
        this.userName = this.userInfo.username
        this.mobile = this.userInfo.mobile || '暂无绑定手机号'
        this.balance = this.userInfo.balance
        this.couponCount = this.userInfo.gift_amount
        this.pointNumber = this.userInfo.point
      } else {
        this.userName = '登录/注册'
        this.mobile = '登录后享受更多特权'
      }
    }
  },
  watch: {
    userInfo (value) {
      this.initData()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .profile_wrapper
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #f5f5f5
    .profile_header
      display: flex
      color: #fff
      align-items: center
      padding: .5rem .3rem
      background-image: linear-gradient(90deg,#0af,#0085ff)
      .photo
        width: 1.2rem
        height: 1.2rem
        overflow: hidden
        border-radius: 50%
      .info
        overflow: hidden
        margin-left: .36rem
        flex-grow: 1
        .account
          font-size: .42rem
          margin-bottom: .1rem
          font-weight: 700
          display: flex
          align-items: center
        .tel
          display: flex
          align-items: center
          font-size: .24rem
          .iconfont
            margin: 0.08rem 0 0 -0.05rem
    .info_data ul
      display: flex
      align-items: center
      width: 100%
      border-bottom: .01rem solid #f5f5f5
      background-color: #fff
      li
        display: flex
        flex-direction: column
        flex: 1
        width: 33.33%
        padding: .4rem 0
        text-align: center
        &:not(:last-child)
          border-right: 1px solid #f5f5f5
        .num
          color: #f60
          b
            font-size: .52rem
            font-weight: 700
        .name
            font-weight: 700
      li:nth-child(2) .num
        color: #f90
      li:nth-child(3) .num
        color: #6ac20b
    .profile_link_list
      margin-top: .2rem
      border-top: .01rem solid #f5f5f5
      border-bottom: .01rem solid #f5f5f5
      font-size: .32rem
      line-height: .32rem
      background: #fff
      .link
        padding-left: .5rem
        color: #333
        display: flex
        align-items: center
        .icon
          width: .5rem
          line-height: .5rem
          display: flex
          justify-content: center
          align-items: center
          margin: 0 0.2rem 0 -0.3rem
          .iconfont
            font-size: .45rem
        .rt
          width: 100%
          display: flex
          justify-content: space-between
          padding: .28rem .2rem .28rem 0
          .arrow
            color: #bbb
    .policy, .policy a
      text-align: center
      margin: .46rem auto
      color: #4da6f0
      font-size: .3rem
    .router-slid-enter-active, .router-slid-leave-active
        transition: all .4s
    .router-slid-enter, .router-slid-leave-active
        transform: translate3d(2rem, 0, 0)
        opacity: 0
</style>
